<template>
    <div class="mg-tb">
        <!--评论提交-->
        <div id="case">
            <h3>提交评论</h3>
            <p class="line"></p>
            <textarea placeholder="请输入评论内容" v-model="getcomment"></textarea>
            <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        </div>
    
        <!--评论列表展示-->
        <div class="title" v-for="(item,index) in list" :key="index">
            <span>第{{index+1}}楼</span>
            <span>用户：{{item.user_name}}</span>
            <br>
            <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">{{item.content}}</li>
            </ul>
        </div>
    
        <!--加载更多-->
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js';
export default {
    // http://www.lovegf.cn:8899/api/getcomments/13?pageindex=1
    data() {
        return {
            pageindex: 1,    //获取api第几页评论
            getcomment: '',     //存储评论
            list: []
        }
    },
    props: ['id'],
    created() {
        this.getcommentlist(1);
    },
    methods: {
        getmore() {
            // 实现this.pageindex值增加1
            this.pageindex++;

            // 获取当前this.pageindex值对应的分页数据
            this.getcommentlist(this.pageindex);
        },
        getcommentlist(pageindex) {
            pageindex = pageindex || 1;
            // 确定url http://www.lovegf.cn:8899/api/getcomments/13?pageindex=1
            // this.pageindex = this.$route.params.id; //获取当前页
            var url = common.apitomain + "/api/getcomments/" + this.id + "?pageindex=" + pageindex;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                // 将message数组中的数据赋值给this.list concat是两个数据相连形成新的数组
                this.list = this.list.concat(body.message);
            })
        },
        postcomment() {
            // 确定url http://www.lovegf.cn:8899/api/postcomment/43
            var url = common.apitomain + "/api/postcomment/" + this.id;
            this.$http.post(url, { content: this.getcomment }, { emulateJSON: true })
                .then(function (res) {
                    Toast(res.body.message);    //提交数据不需要判断

                    //数据发表后将数据追加到评论列表顶部
                    this.list = [
                        {
                            "user_name": "匿名用户",
                            "add_time": new Date(),
                            "content": this.getcomment
                        }
                    ].concat(this.list);

                    this.getcomment = ''    //清空输入框
                })
        }
    }
}
</script>

<style scoped>
#case {
    padding: 5px;
}

#case h3 {
    padding-bottom: 5px;
}

#case .line {
    height: 1px;
    width: 100%;
    background-color: #ddd;
}

.title {
    color: #6d6d72;
    font-size: 15px;
    background-color: #eee;
    margin: 0px 5px 15px 5px;
    padding: 10px 5px;
}
</style>